<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Animate rectangles</title>
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>-->
        <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
        <script type="text/javascript" charset="utf-8">
            dojo.require("dojox.gfx");
            dojo.require("dojo.fx");
            dojo.require("dojo.fx.easing");
            
            var WIDTH = 600, HEIGHT = 400,
                BAR_GAP = 20, BAR_WIDTH = 76,
                BAR_FILL = "red", BAR_STROKE = "black",
                CHAIN_DURATION = 250, COMBINE_DURATION = 1000;
            
            var rects = [];
            
            var enable = function(enabled){
                // enable/disable controls on the page
                dojo.query("input, select, button, textarea").attr("disabled", !enabled);
            };
            
            var empty = {};
            var populateSelect = function(from, select){
                var module = dojo.getObject(from);
                for(var name in module){
                    if(name in empty){ continue; }
                    var fun = module[name];
                    if(dojo.isFunction(fun)){
                        dojo.create("option", {
                            value:     from + "." + name,
                            selected:  name == "backOut",
                            innerHTML: from + "." + name
                        }, select);
                    }
                }
            };
            
            var animate = function(){
                // disable controls
                enable(false);
                
                // get old heights
                var oldHeights = dojo.map(rects, function(rect){ return rect.getShape().height; });
                
                // generate new heights (can't be 0 on IE/VML!)
                var newHeights = dojo.map(rects, function(){ return 1 + Math.random() * (HEIGHT - 1); });
                
                // get parameters
                var duration = dojo.byId("chain").checked ? CHAIN_DURATION : COMBINE_DURATION,
                    easing = dojo.getObject(dojo.byId("easing").value);
                
                // create animations between heights
                var animations = dojo.map(rects, function(rect, i){
                    // create animation
                    var anim = new dojo._Animation({
                        duration: duration,
                        easing:   easing,
                        curve:    [oldHeights[i], newHeights[i]]
                    });
                    // update the rectangle on every tick
                    dojo.connect(anim, "onAnimate", function(height){
                        var shape = rect.getShape();
                        shape.y = HEIGHT - height;
                        shape.height = height;
                        rect.setShape(shape);
                    });
                    return anim;
                });
                // combine all animations
                var masterAnimation = dojo.byId("chain").checked ?
                        dojo.fx.chain(animations) : dojo.fx.combine(animations);
                // enable controls when they are done
                dojo.connect(masterAnimation, "onEnd", function(){ enable(true); });
                // start the animation
                masterAnimation.play();
            }
            
            var init = function(surface){
                // create rectangles
                for(var w = BAR_GAP; w < WIDTH - BAR_WIDTH; w += BAR_WIDTH + BAR_GAP){
                    rects.push(surface.createRect({
                        x: w, y: HEIGHT, width: BAR_WIDTH, height: 1
                    }).setFill(BAR_FILL).setStroke(BAR_STROKE));
                }
                // IE/VML doesn't allow height to be 0!
                
                // prepare and enable controls
                populateSelect("dojo.fx.easing", "easing");
                dojo.attr("chain", "checked", false);
                dojo.connect(dojo.byId("animate"), "onclick", animate);
                enable(true);
            };
            
			function createSurface(){
                var surface = dojox.gfx.createSurface(dojo.byId("surface"), 600, 400);
				surface.whenLoaded(init);
			};

            dojo.addOnLoad(createSurface);
        </script>
    </head>
    <body>
        <p>
            <button id="animate" disabled="disabled">Animate!</button>&nbsp;
            <label>Easing:&nbsp;<select id="easing" disabled="disabled"></select></label>&nbsp;
            <label><input id="chain" type="checkbox" disabled="disabled">&nbsp;Chain (otherwise Combine)</label>
        </p>
        <div id="surface" style="width: 600px; height: 400px; border:1px solid #000;"></div>
    </body>
</html>
